<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="font/iconfont.css" />
    <link rel="stylesheet" href="font1/iconfont.css" />
    <link rel="stylesheet" href="css.css" />
    <title>侧边导航栏</title>
</head>
<body>
    <div class="wrap">
        <div class="nav">
            <div class="btn">
                <div class="btn-item1"></div>
                <div class="btn-item2"></div>
                <div class="btn-item3"></div>
            </div>
            <div class="header">
                <div class="header-ava">
                    <img src="img/girl.jpg"/>
                </div>
                <div class="header-con">
                    <p>Good day</p>
                    <div>Macie J.</div>
                </div>
            </div>
            <div class="main">
                <div class="line"></div>
                <div class="title">Menu</div>
                <div class="menu">
                    <div class="item">
                        <div class="item-tip"></div>
                        <div class="item-icon"><span class="iconfont icon-wenjian"></span></div>
                        <div class="item-con">Document</div>
                        <div class="item-r-icon"><span class="iconfont icon-shezhi"></span></div>
                    </div>
                    <div class="item">
                        <div class="item-tip"></div>
                        <div class="item-icon"><span class="iconfont icon-qipao1"></span></div>
                        <div class="item-con">Message</div>
                        <div class="item-r-icon"></div>
                    </div>
                    <div class="item">
                        <div class="item-tip"></div>
                        <div class="item-icon"> <span class="iconfont icon-shexiang1"></span></div>
                        <div class="item-con">Video</div>
                        <div class="item-r-icon"></div>
                    </div>
                    <div class="item">
                        <div class="item-tip"></div>
                        <div class="item-icon"><span class="iconfont icon-xiaolian"></span></div>
                        <div class="item-con">Discover</div>
                        <div class="item-r-icon"><span class="iconfont icon-caidan1"></span></div>
                    </div>
                    <div class="item">
                        <div class="item-tip"></div>
                        <div class="item-icon"><span class="iconfont icon-shexiang"></span></div>
                        <div class="item-con">Discount</div>
                        <div class="item-r-icon"></div>
                    </div>
                    <div class="item">
                        <div class="item-tip"></div>
                        <div class="item-icon"><span class="iconfont icon-wenjian1"></span></div>
                        <div class="item-con">Payouts</div>
                        <div class="item-r-icon"></div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="title">Server</div>
                <div class="server">
                    <div class="item">
                        <div class="item-icon"><span class="iconfont icon-caidan"></span></div>
                        <div class="item-con">Software</div>
                        <div class="item-r-icon">
                            <span class="iconfont icon-Dashboard"></span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-icon"><span class="iconfont icon-renqun"></span></div>
                        <div class="item-con">Chat</div>
                        <div class="item-r-icon"></div>
                    </div>
                    <div class="item">
                        <div class="item-icon"><span class="iconfont icon-sousuo"></span></div>
                        <div class="item-con">Intercom</div>
                        <div class="item-r-icon"><span class="iconfont icon-caidan1"></span></div>
                    </div>
                    <div class="item">
                        <div class="item-icon"><span class="iconfont icon-gengduo-a"></span></div>
                        <div class="item-con">Setting</div>
                        <div class="item-r-icon"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>